<template>
  <div class="app-container">
    <basic-table
      :table-title="tableTitle"
      :data-source="dataSource"
      :button-group="buttonGroup"
      :search-form="searchForm"
      :model-type="'adminPerson'"
      :multiple-table="false"
      :reload="reload"
      @closeReload="closeReload"
    />
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" top="3%" width="30%">
      <div class="el-dialog-div">
        <data-form
          :loading="loading"
          :fields="formFields"
          :operate="operate"
          @createDataEmit="createDataEmit"
          @dialogFormVisibleEmit="dialogFormVisibleEmit"
        />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import DataForm from '@/views/adminPerson/components/dataForm.vue'
import BasicTable from '@/components/BasicTable/index.vue'
import { addPerson, updatePerson, getPersons } from '@/api/adminPerson'
import { TipsBox } from '@/utils/feedback.js'
export default {
  name: 'AdminPerson',
  components: { BasicTable, DataForm },
  data() {
    return {
      dialogFormVisible: false,
      dialogTitle: '新增',
      dialogUpdateUpLimit: false,
      loading: false,
      dataSource: () => getPersons,
      tableTitle: [
        {
          label: '姓名',
          value: 'PerName',
          show: true,
          type: 'text'
        },
        {
          label: '身份证',
          value: 'PerCard',
          show: true,
          type: 'text'
        },
        {
          label: '联系方式',
          value: 'PerMobile',
          show: true,
          type: 'text'
        },
        {
          label: '企业',
          value: 'ComName',
          show: true,
          type: 'text'
        },
        {
          label: '地区',
          value: 'DistFullName',
          show: true,
          type: 'text'
        },
        {
          label: '创建时间',
          value: 'PerCreateOn',
          show: true,
          type: 'text'
        },
        {
          label: '操作',
          show: true,
          type: 'options',
          options: [
            {
              text: '修改',
              icon: 'el-icon-edit-outline',
              type: 'success',
              clickEvent: (row) => {
                this.dialogTitle = '修改'
                this.operate = 'update'
                for (const i in this.formFields) {
                  for (const j in row) {
                    if (i.toLowerCase() === j.toLowerCase()) {
                      this.formFields[i] = row[j]
                    }
                  }
                }
                this.formFields.personId = row.Id
                this.dialogFormVisibleEmit(true)
              }
            }
          ]
        }
      ],
      reload: false,
      formFields: {
        comName: '',
        distId: '',
        perCard: '',
        perMobile: '',
        perName: '',
        perComId: '',
        personId: ''
      },
      searchForm: {
        expend: true,
        title: '人员管理',
        fields: [
          {
            show: true,
            type: 'input',
            label: '姓名',
            labelShow: true,
            name: 'perName'
          },
          {
            show: true,
            type: 'input',
            label: '身份证',
            labelShow: true,
            name: 'perCard'
          },
          {
            show: true,
            type: 'input',
            label: '手机号',
            labelShow: true,
            name: 'perMobile'
          }
        ]
      },
      buttonGroup: {
        expend: true,
        show: true,
        title: '表格筛选',
        size: 'default',
        fields: [
          {
            showButtonGroup: true,
            type: 'text', // 文字按钮
            text: '新增',
            icon: 'el-icon-circle-plus-outline',
            callBack: () => {
              this.operate = 'add'
              for (const i in this.formFields) {
                this.formFields[i] = ''
              }

              this.dialogFormVisibleEmit(true)
            }
          }
        ]
      },
      operate: 'add'
    }
  },
  methods: {
    closeReload(val) {
      this.reload = val
    },
    createDataEmit(v) {
      this.loading = true
      const o = this.operate === 'add' ? addPerson : this.operate === 'update' ? updatePerson : null
      o(v).then(res => {
        this.loading = false
        if (res.code === 200) {
          TipsBox('success', res.message)
          this.dialogFormVisibleEmit(false)
          this.reload = true
        } else if (res.code === 500) {
          TipsBox('error', res.errors)
        }
      }).catch(error => {
        this.loading = false
      })
    },
    dialogFormVisibleEmit(v) {
      this.dialogFormVisible = v
    }
  }
}
</script>
